<template>
  <div class="grid">
    <!-- <van-grid :border="false" :column-num="3">
      <van-grid-item
        v-for="(item,index) in imgList"
        :key="index"
        :icon="item.img"
        :text="item.text"
        @click="goTo(item.url)"
      />
    </van-grid>-->
    <div class="grid-item" v-for="(item,index) in imgList" :key="index" @click="goTo(item.url)">
      <img :src="item.img" alt />
      <span>{{item.text}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          img: require("./images/01.png"),
          text: "团徽团旗",
          url: "/tutq",
        },
        {
          img: require("./images/02.png"),
          text: "排行榜",
          url: "/phb",
        },
        {
          img: require("./images/03.png"),
          text: "精品内容",
          url: "/jpnr",
        },
        {
          img: require("./images/04.png"),
          text: "树洞",
          url: "/sd",
        },
        {
          img: require("./images/05.png"),
          text: "志愿服务",
          url: "/zyfw",
        },
        {
          img: require("./images/06.png"),
          text: "青年之家",
          url: "/qnzj",
        },
        {
          img: require("./images/07.png"),
          text: "青少年12355",
          url: "/qsn",
        },
        {
          img: require("./images/08.png"),
          text: "共青团文件检索",
          url: "/gqtwjjs",
        },
        {
          img: require("./images/09.png"),
          text: "青微矩阵",
          url: "/qhjz",
        },
      ],
    };
  },
  methods: {
    goTo(url) {
      this.$toast("正在开发中...");
    },
  },
};
</script>

<style scoped lang="scss">
@import "./grid.scss";
.grid {
  margin-top: 20px;
}
::v-deep .van-icon__image {
  width: 80px;
  height: 80px;
  border: 1px solid #eee;
}

::v-deep .van-grid-item__content {
  padding: 8px 0;
}

::v-deep .van-grid-item__text {
  font-size: 14px;
  color: #000;
}

::v-deep .van-grid {
  display: flex;
  justify-content: space-between;
}
</style>